<template>
  <div>
    <el-dialog
      v-model="isShow"
      title="新建文件夹"
      width="500"
      center
      @close="closeHandler"
      @open="openHandler"
    >
      <el-form
        label-width="120px"
        :model="fileInfo"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="文件夹名称:" prop="name">
          <el-input
            placeholder="请输入文件夹名称"
            v-model="fileInfo.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否为根文件夹:">
          <el-radio-group v-model="fileInfo.isBig" size="small">
            <el-radio value="1" border>是</el-radio>
            <el-radio value="2" border>否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="父文件夹:"
          :prop="fileInfo.isBig === '1' ? '' : 'parentId'"
        >
          <el-tree-select
            :disabled="fileInfo.isBig === '1'"
            v-model="fileInfo.parentId"
            :data="data"
            :render-after-expand="false"
            :props="treeProps"
            style="width: 240px"
            :check-strictly="true"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShow = false">取消</el-button>
          <el-button type="primary" @click="AddFile"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { createFileAPI, getFileListAPI } from "@/api/file";
import { buildTree } from "@/utiles/tree";
import { ElMessage } from "element-plus";
const emits = defineEmits(['getFileList'])
let isShow = defineModel();
let data = ref([]);
let fileInfo = reactive({
  name: "",
  parentId: "",
  isBig: "2",
});
let treeProps = {
  label: "name",
  children: "children",
  value: "_id",
};
let formRef = ref();
//表单校验
const validataName = (rule, value, callback) => {
  const regex = /^[a-zA-Z0-9\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5_. ]*$/;
  console.log(regex.test(value));
  if (regex.test(value)) {
    callback();
  } else {
    callback(new Error("文件夹名称格式错误"));
  }
};
let rules = reactive({
  name: [
    { required: true, message: "请输入文件夹名称", trigger: "blur" },
    //文件夹命名格式
    {
      validator: validataName,
      message: "文件夹名称格式错误",
      trigger: "blur",
    },
  ],
  parentId: [{ required: true, message: "请选择父文件夹", trigger: "change" }],
});

watch(
  () => fileInfo.isBig,
  (newValue) => {
    if (newValue === "1") {
      fileInfo.parentId = "";
    }
  }
);
const getData = async () => {
  let result = await getFileListAPI();
  data.value = buildTree(result.data);
};
const openHandler = ()=>{
  getData();
}
const AddFile = async () => {
  await formRef.value.validate();
  let result = await createFileAPI(fileInfo);
  if(result.code == 200) {
    ElMessage.success('新建文件夹成功')
    closeHandler()
    emits('getFileList')
  }
};
const closeHandler = () => {
  fileInfo.name = "";
  fileInfo.parentId = "";
  fileInfo.isBig = "1";
  formRef.value.resetFields();
  isShow.value = false;
};
</script>

<style lang="scss" scoped></style>
